<template>
    <page-container>
        <div class="ant-pro-table">
            <div class="ant-pro-table-search">
                <a-form layout="horizontal">
                    <a-row :gutter="16" type="flex" justify="start">
                        <a-col :span="4">
                            <a-form-item style="width: 100%;">
                                <a-range-picker v-model:value="queryParams.times" :placeholder="['开始时间', '结束时间']"
                                    value-format="YYYY-MM-DD" allow-clear @change=" handleSearch()"
                                    style="width: 100%;" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item>
                                <a-input v-model:value="queryParams.username" placeholder="账号" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="4">
                            <a-button @click="handleSearch" type="primary">搜索</a-button>
                            <a-button @click="handleReset" class="ml-5px">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <a-card :body-style="{ padding: 0 }" ref="elRef">
                <div class="ant-pro-table-list-toolbar">
                    <div class="ant-pro-table-list-toolbar-container">
                        <div class="ant-pro-table-list-toolbar-left"></div>
                        <div class="ant-pro-table-list-toolbar-right">
                            <a-space align="center">
                                <a-button @click="handleExport" class="ml-10px" :loading="exportLoading">
                                    <download-outlined />
                                    导出
                                </a-button>
                            </a-space>
                            <div class="ant-pro-table-list-toolbar-divider">
                                <a-divider type="vertical" />
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="刷新">
                                    <reload-outlined @click="reload" />
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="密度">
                                    <a-dropdown :trigger="['click']" placement="bottomRight">
                                        <column-height-outlined />
                                        <template #overlay>
                                            <a-menu style="width: 80px" :selected-keys="[state.tableSize]" @click="
                                                    ({ key }) => {
                                                        fetchDataContext.tableSize = String(key);
                                                    }
                                                ">
                                                <a-menu-item key="default">
                                                    <a href="javascript:;">默认</a>
                                                </a-menu-item>
                                                <a-menu-item key="middle">
                                                    <a href="javascript:;">中等</a>
                                                </a-menu-item>
                                                <a-menu-item key="small">
                                                    <a href="javascript:;">紧凑</a>
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-popover placement="bottomRight" arrowPointAtCenter trigger="click"
                                    overlayClassName="ant-pro-table-column-setting-overlay">
                                    <template #title>
                                        <div class="ant-pro-table-column-setting-title">
                                            <a-checkbox v-model:checked="columnState.checkAll"
                                                :indeterminate="columnState.indeterminate"
                                                @change="handleColumnAllClick">
                                                列展示 / 排序
                                            </a-checkbox>
                                            <a @click="reset">重置</a>
                                        </div>
                                    </template>
                                    <template #content>
                                        <span class="ant-pro-table-column-setting-list">
                                            <drag-container lockAxis="y" dragClass="ant-pro-table-drag-ghost"
                                                dropClass="ant-pro-table-drop-ghost"
                                                @drop="({ removedIndex, addedIndex }) => move(removedIndex, addedIndex)">
                                                <template :key="column.key" v-for="column in dynamicColumnItems">
                                                    <draggable>
                                                        <div class="ant-pro-table-column-setting-list-item">
                                                            <drag-icon />
                                                            <a-checkbox :checked="column.checked"
                                                                @change="handleColumnChange($event, column)">
                                                                {{ column.label }}
                                                            </a-checkbox>
                                                        </div>
                                                    </draggable>
                                                </template>
                                            </drag-container>
                                        </span>
                                    </template>
                                    <a-tooltip title="列设置">
                                        <setting-outlined />
                                    </a-tooltip>
                                </a-popover>
                            </div>
                            <!-- <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip :title="screenState ? '退出全屏' : '全屏'">
                                    <fullscreen-outlined v-if="!screenState" @click="setFull" />
                                    <fullscreen-exit-outlined v-else @click="exitFull" />
                                </a-tooltip>
                            </div> -->
                        </div>
                    </div>
                </div>
                <a-table row-key="id" :size="state.tableSize" :loading="state.loading" :columns="dynamicColumns"
                    :data-source="state.dataSource" :pagination="{
                        current: state.current,
                        pageSize: state.pageSize,
                        total: state.total,
                        showTotal: total => `共 ${total} 条`,
                    }" :scroll="{ x: 1150 }" @change="handleTableChange"></a-table>
            </a-card>
        </div>
    </page-container>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref } from 'vue';
    import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DownloadOutlined } from '@ant-design/icons-vue';
    import { Container as DragContainer, Draggable } from '@/components/draggable';
    import { getLoginLogPage, exportLoginLogExcel } from '@/api/logs/login';
    import type { Pagination, TableColumn } from '@/typing';
    import { useFetchData } from '@/utils/hooks/useFetchData';
    import { useFullscreen } from '@/utils/hooks/useFullscreen';
    import { useTableDynamicColumns } from '@/utils/hooks/useTableColumn';
    import DragIcon from '@/components/table/drag-icon.vue';
    import { downloadByData } from '@/utils/download';

    const baseColumns: TableColumn[] = [
        {
            title: '登录时间',
            dataIndex: 'createTime',
            fixed: 'left',
        },
        {
            title: '用户账号',
            dataIndex: 'username',
            ellipsis: true,
        },
        // {
        //     title: '用户编号',
        //     dataIndex: 'traceId',
        //     width: 160,
        // },
        {
            title: '用户类型',
            dataIndex: 'logType',
            ellipsis: true,
        },
        {
            title: '用户ip',
            dataIndex: 'userIp',
            ellipsis: true,
        },
        {
            title: '设备',
            dataIndex: 'userAgent',
            ellipsis: true,
            customRender: ({ text }) => {
                if (/windows/i.test(text)) {
                    return 'Windows';
                } else if (/macintosh|mac os x/i.test(text)) {
                    return 'macOS';
                } else if (/android/i.test(text)) {
                    return 'Android';
                } else if (/iphone|ipad|ipod/i.test(text)) {
                    return 'iOS';
                } else if (/Postman/i.test(text)) {
                    return 'Postman';
                } else {
                    return 'Unknown OS';
                }
            },
        },
        {
            title: '登陆结果',
            dataIndex: 'result',
            ellipsis: true,
            customRender: ({ text }) => text === 1 ? '成功' : '失败',
        },
    ];
    export default defineComponent({
        name: 'AccountList',
        setup() {
            const exportLoading = ref<boolean>(false);

            const {
                state: columnState,
                dynamicColumns,
                dynamicColumnItems,
                handleColumnAllClick,
                handleColumnChange,
                reset,
                move,
            } = useTableDynamicColumns(baseColumns, { needRowIndex: false });
            const [elRef, screenState, { setFull, exitFull }] = useFullscreen();
            const queryParams = reactive<any>({
                keyword: '',
            });
            const fetchDataContext = reactive<any>({
                current: 1,
                pageSize: 10,
                tableSize: 'middle', // 'default' | 'middle' | 'small'
                stripe: true,
                requestParams: {},
            });
            const statusMap = {
                0: { text: '停用', status: 'error' },
                1: { text: '正常', status: 'processing' },
            };
            // 表格数据和加载
            const { reload, context: state } = useFetchData(getLoginLogPage, fetchDataContext);
            const handleTableChange = ({ current, pageSize }: Pagination) => {
                fetchDataContext.current = current;
                fetchDataContext.pageSize = pageSize;
            };

            const handleSearch = () => {
                if (queryParams.times && queryParams.times.length > 0) {
                    queryParams.startTime = queryParams.times[0] + ' 00:00:00';
                    queryParams.end = queryParams.times[1] + ' 23:59:59';
                }
                fetchDataContext.requestParams = { ...queryParams };
                delete fetchDataContext.requestParams.times;
            };
            const handleReset = () => {
                // queryParams.keyword = '';
                fetchDataContext.current = 1;
                fetchDataContext.requestParams = { ...queryParams };
            };

            const handleExport = () => {
                exportLoading.value = true;
                exportLoginLogExcel({
                    ...fetchDataContext.requestParams,
                    size: 10000000,
                })
                    .then(res => {
                        console.log(res);
                        downloadByData(res, '登录日志.xlsx');
                    })
                    .finally(() => {
                        exportLoading.value = false;
                    });
            };

            return {
                reload,
                state,
                columnState,
                dynamicColumns,
                dynamicColumnItems,
                statusMap,
                // fullscreen
                elRef,
                screenState,
                setFull,
                exitFull,
                handleTableChange,

                handleColumnChange,
                handleColumnAllClick,
                reset,
                move,

                fetchDataContext,

                queryParams,

                handleReset,
                handleSearch,
                handleExport,
                exportLoading,
            };
        },
        components: {
            DragIcon,
            // PlusOutlined,
            ReloadOutlined,
            ColumnHeightOutlined,
            SettingOutlined,
            // FullscreenOutlined,
            // FullscreenExitOutlined,
            Draggable,
            DragContainer,
            DownloadOutlined,
        },
    });
</script>
